<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Config</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/control.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        h1 {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .table {
            margin-top: 20px;
        }
        th {
            background-color: #007bff;
            color: white;
        }
        .btn-primary {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- Toggle Button -->
    <div class="sidebar-toggle btn btn-secondary">
        <span id="toggle-sidebar">☰</span>
    </div>

    <div class="sidebar">
        <h4 class="text-center">导航</h4>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/control.html">Control</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/servo.html">Offset</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/config_exposure">Exposure Config</a>
            </li>
            <!-- Add more navigation items here -->
        </ul>
    </div>
    <div class="container">
        <h1 class="text-center">Edit Config</h1>
        <form action="{{ url_for('update_config') }}" method="POST">
        <input type="hidden" name="config_page" value="{{ config_page }}">
            <table class="table table-bordered">
                {% for section, options in config_data.items() %}
                    {% if options is mapping %}
                        <thead class="thead-dark">
                            <tr><th colspan="2">{{ section | capitalize }}</th></tr>
                        </thead>
                        <tbody>
                            {% for key, value in options.items() %}
                                <tr>
                                    <td>{{ key | capitalize }}</td>
                                    <td>
                                        <input type="text" class="form-control" name="{{ section }}.{{ key }}" value="{{ value }}">
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    {% else %}
                        <thead class="thead-dark">
                            <tr><th colspan="2">{{ section | capitalize }}</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ section | capitalize }}</td>
                                <td>
                                    <input type="text" class="form-control" name="{{ section }}" value="{{ options }}">
                                </td>
                            </tr>
                        </tbody>
                    {% endif %}
                {% endfor %}
            </table>
            <button type="submit" class="btn btn-primary btn-block">Save</button>
        </form>
    </div>
    <!-- 引入 Bootstrap JS 和依赖库 -->
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
    <script>
        document.getElementById('toggle-sidebar').addEventListener('click', function() {
        var sidebar = document.querySelector('.sidebar');
        var mainContent = document.querySelector('.main-content');
        sidebar.classList.toggle('show');
        mainContent.classList.toggle('shifted');
    });
    </script>
</body>
</html>
